<script lang="ts">
    import type { MsgInfo } from "$lib/api/board/board_chat";
    import type { Action } from "svelte/action";
    import { chatStore } from "./store.svelte";
    import AsyncImage from "$lib/components/image/AsyncImage.svelte";
    import dayjs from "dayjs";

    interface Props {
        msg: MsgInfo;
    }
    let props: Props = $props();

    const msgAction: Action = (node) => {
        $effect(() => {
            if (chatStore.scrollToMsgId == props.msg.msg_id) {
                setTimeout(() => {
                    node.scrollIntoView();
                    chatStore.scrollToMsgId = "";
                }, 100);
            }
        });
    };
</script>

<div use:msgAction>
    <div class="flex gap-2">
        <AsyncImage
            src={props.msg.send_logo_uri}
            sizeClass="w-[20px] h-[20px]"
            borderClass="rounded-[10px]"
        />
        {props.msg.send_display_name}
        {dayjs(props.msg.send_time).format("YYYY-MM-DD HH:mm:ss")}
    </div>
    <pre
        class="text-wrap break-all ml-[30px] p-1 bg-surface-200-800 rounded-[10px]">{props
            .msg.content}</pre>
</div>
